<script
  setup
  lang='ts'
>
import { getHomeBannerAPI } from '@/services/home'
import { onLoad } from '@dcloudio/uni-app'
import CustomNavbar from '@/components/CustomNavbar.vue'
import XtxSwiper from '@/components/XtxSwiper.vue'
import CategoryPanel from "@/pages/index/components/CategoryPanel.vue";
import { ref } from "vue"
import type { BannerItem } from "@/types/home.d.ts"
import { getHomeCategoryAPI } from "@/services/home";
import type { CategoryItem } from "@/types/home.d.ts";
import type { HotItem } from "@/types/home.d.ts";
import { getHotItemAPI } from "@/services/home";
import HotPanel from "@/pages/index/components/HotPanel.vue";
import XtxGuess from "@/components/XtxGuess.vue";
import Skeleton from "@/components/Skeleton.vue";


const bannerList = ref<BannerItem[]>([])

const getHomeBannerDate = async () => {
  const res = await getHomeBannerAPI()
  bannerList.value = res.result
}

const categoryList = ref<CategoryItem[]>([])

const HomeCategory = async () => {
  let res = await getHomeCategoryAPI();
  categoryList.value = res.result
}

const hotList = ref<HotItem[]>([])

const getHotList = async () => {
  let res = await getHotItemAPI();
  hotList.value = res.result
}
import { useGuessList } from '@/composables/index.ts'
// 获取猜你喜欢组件实例
const { guessRef, onScrolltolower } = useGuessList()

// 下拉刷新状态
const isTriggered = ref(false)

// 自定义下拉刷新被触发
const onRefresher = async () => {
  // 开启动画
  isTriggered.value = true
  // 重置猜你喜欢组件数据
  guessRef.value?.resetData()
  // 同一时间发送多个请求
  await Promise.all([getHomeBannerDate(), HomeCategory(), getHotList()], guessRef.value?.getMore()) // 关闭动画
  isTriggered.value = false
}



const isLoading = ref<boolean>(false)

onLoad(() => {
  isLoading.value = true
  Promise.all([
    getHomeBannerDate(),
    HomeCategory(),
    getHotList()
  ])
  isLoading.value = false
})

</script>

<template>
  <CustomNavbar />
  <scroll-view refresher-enabled @refresherrefresh='onRefresher' @scrolltolower='onScrolltolower'
    :refresher-triggered='isTriggered' class='scroll-view' scroll-y>
    <!--骨架屏-->
    <Skeleton v-if='isLoading' />
    <!--内容-->
    <template v-else>
      <XtxSwiper :list='bannerList' />
      <CategoryPanel :list='categoryList' />
      <HotPanel :list='hotList' />
      <XtxGuess ref='guessRef' />
    </template>

  </scroll-view>
</template>

<style lang='scss'>
page {
  background-color: #f7f7f7;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.scroll-view {
  flex: 1;
}
</style>
